<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Job Search</title>
</head>
<script type="text/javascript">
	var req;
	function ajaxCall() {
		var salary = "salary=" + encodeURI(document.search.providesalary.value);
		var address = "&address=" + encodeURI(document.search.region.value);
		var companysize = "&companysize=" + encodeURI(document.search.companysize.value);
		var companytype = "&companytype=" + encodeURI(document.search.cotype.value);
		var jobtype = "&jobtype=" + encodeURI(document.search.jobterm.value);

		
		
		var url = "Serv";
		
		//checking browser type and creating XMLHttpRequest accordingly
		if (window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP"); //For old IE(ie6 or early)
		}

		req.open("POST", url, true);
		req.onreadystatechange = callback;
		req.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		req.setRequestHeader("Content-length", salary.length+address.length+companysize.length+companytype.length+jobtype.length);
		req.setRequestHeader("Connection", "close");
		req.send(salary+address+companysize+companytype+jobtype);
		
	}
	function callback() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				// update the HTML DOM based on whether or not message is valid
				parseMessage();
			}
		}
	}
	function parseMessage() {
		var message = req.responseText;
		setMessage(message);
	}
	function setMessage(message) {
		mdiv = document.getElementById("JOBID");
		
		mdiv.innerHTML = "<div style=\"color:green\">"+"sds"+"</ div>";
		mdiv1 = document.getElementById("COMPANY");
		mdiv1.innerHTML = "<div style=\"color:green\">"+"COMPANY"+"</ div>";
		mdiv2 = document.getElementById("SALARY");
		mdiv2.innerHTML = "<div style=\"color:green\">"+"SALARY"+"</ div>";
		mdiv3 = document.getElementById("ADDRESS");
		mdiv3.innerHTML = "<div style=\"color:green\">"+"ADDRESS"+"</ div>";
		mdiv4 = document.getElementById("COMPANYSIZE");
		mdiv4.innerHTML = "<div style=\"color:green\">"+"COMPANYSIZE"+"</ div>";
		mdiv5 = document.getElementById("COMPANYTYPE");
		mdiv5.innerHTML = "<div style=\"color:green\">"+"COMPANYTYPE"+"</ div>";
		mdiv6 = document.getElementById("JOBTYPE");
		mdiv6.innerHTML = "<div style=\"color:green\">"+"JOBTYPE"+"</ div>";
		mdiv7 = document.getElementById("PROVIDER");
		mdiv7.innerHTML = "<div style=\"color:green\">"+"PROVIDER"+"</ div>";
		
		
		if(message=='Valid User')
			mdiv.innerHTML = "<div style=\"color:green\">" + message + "</ div>";
		else
			mdiv.innerHTML = "<div style=\"color:red\">" + message + "</ div>";
	}
</script>


<body>
<form name="search"  >
	<table width="450" height="160" border="1" align="center" bgcolor="aliceblue">
		<caption>Job Search</caption>
		<tr>
			<td>Salary Range(月薪范围)</td>
			<td><select  name="providesalary"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >Negotiable(面议) </option><option value="2"  >Less than 1500</option><option value="3"  >1500-1999</option><option value="4"  >2000-2999</option><option value="5"  >3000-4499</option><option value="6"  >4500-5999</option><option value="7"  >6000-7999</option><option value="8"  >8000-9999</option><option value="9">More than 10000</option></select></td>
		</tr>
		<tr>	
			<td>Regional(地区范围)</td>
			<td><select  name="region"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >jiangsu</option><option value="2"  >shanghai</option><option value="3"  >zhejiang</option><option value="4"  >anhui</option><option value="5"  >fujian</option><option value="6"  >henan</option><option value="7"  >beijing</option><option value="8"  >hubei</option><option value="9"  >Others</option></select></td>
			
		</tr>
		<tr>
			<td>Company Size(公司规模)</td>
			<td><select  name="companysize"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >Less than 50</option><option value="2"  >50-150</option><option value="3"  >150-500</option><option value= "4">More than 500</option></select></td>
        </tr>
		<tr>
			<td>Company Nature(公司性质)</td>
			<td><select  name="cotype"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >Foreign(外资)</option><option value="2"  > Joint-ventured(合资)</option><option value="3"  >SOEs(国企)</option><option value="4"  >Private company(民营公司)</option><option value="5"  >Others</option></select></td>
		</tr>
		<tr>
			<td>Industry Type(行业类型)</td>
			<td><select  name="jobterm"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >Computer(计算机)</option><option value="2"  >Financial(金融)</option><option value="3"  >Trade(贸易)</option><option value="4"  >Advertising(广告)</option><option value="5"  >Logistics Department(物流)</option><option value="6"  >Others</option></select></td>
		</tr>
        
	</table>
	<center><input type="button" value="OK"  onclick="javascript:ajaxCall()"></center>
		
	<table border="1" align="center" bgcolor="whitesmoke">
		<caption>Job Search</caption>
		<tr>
			<td><div id="JOBID"></div></td>
			<td><div id="COMPANY"></div></td>
			<td><div id="SALARY"></div></td>
			<td><div id="ADDRESS"></div></td>
			<td><div id="COMPANYSIZE"></div></td>
			<td><div id="COMPANYTYPE"></div></td>
			<td><div id="JOBTYPE"></div></td>
			<td><div id="PROVIDER"></div></td>
		</tr>
		
	</table>
	
</form>
		
		
</body>

</html>